import React, { useEffect, useState } from 'react'
import { Card } from 'antd'
import CommonFetch from '@/config/CommonFetch'
import _ from 'lodash'

const Cards = () => {
  const [topoData, setTopoData] = useState([])
  useEffect(() => {
    CommonFetch.get('/hdk/topo').then((ret) => {
      setTopoData(ret)
    })
  }, [])
  const renderCardData = (data) => {
    return _.map(data, (item, key) => {
      let children = ''
      if (item.children) {
        children = renderCardData(item.children)
      }

      return (
        <Card style={{ borderRadius: '5px' }} key={key} title={item.id}>
          {children}
        </Card>
      )
    })
  }
  return <div>{renderCardData([topoData])}</div>
}

export default Cards
